<!--
 * @Date: 2022-07-14 06:04:08
 * @LastEditTime: 2022-07-14 10:52:14
-->
<template>
  <div id="md-main" v-if="movie.id">
    <h1 class="md-title">{{movie.movie_name}}</h1>
    <div class="md-content">
      <div class="pic"><img :src="posterUrl + movie.id + '.jpg'"><br>
      </div>
      <div class="detail">
        <p>介绍: {{movie.intro}}</p>
        <p>导演: {{movie.director}}</p>
        <p>演员: {{movie.act}}</p>
        <p>影片类型: {{movie.feature}}</p>
      </div>
      <div class="pingfen" id="pingfen">
        sublime评分<br>
        <div class="fen">{{score}}</div>
        <div class="start-num">
          <el-rate v-model="score" disabled  text-color="#ff9900" score-template="{score}"></el-rate>
        </div>
      </div>
    </div>
    <div class="md-content">
      <el-button class="up-btn" size="mini" type="primary" @click="markWatch('want')" v-if="!hasMarkedWant && isLogin">想看</el-button>
      <el-button class="up-btn" size="mini" type="primary" @click="markWatch('has')" v-if="!hasMarkedWatched && isLogin">看过</el-button>
      <el-rate
        v-model="evaluate_score"
        :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
        v-if="hasMarkedWatched && isLogin"
        @change="evaluateMovie"
      >
      </el-rate>
    </div>
    <div class="comments">
      <div class="bar">
        <div><span class="title">{{movie.movie_name}}的评论 · · · · · ·</span></div>
        <el-button class="comment_btn" @click="openComment" v-if="!hasMarkedWatched && isLogin">
          <span>我要写短评</span>
        </el-button>
      </div>
      <!-- <div class="tab-hd">
        <div style="color: #333333">
          热门 / &nbsp;
        </div>
        <div style="color: #37a">
          最新 / &nbsp;
        </div>
        <div style="color: #37a">
          好友
        </div>
      </div> -->

      <div class="hot-comments">
        <ul v-if="comments.length > 0">
          <li v-for="value in comments" :key="value.comment.id">
            <div class="hot-bar flex_space_between">
              <div class="left flex_flex_start" v-if="value.user.uid">
                <router-link :to="{path: '/user/' + value.user.uid}">
                  <img :src="avatorUrl + value.user.pic" alt="" class="com-user-img">
                  <div class="">{{value.user.nickname}}</div>
                </router-link>
              </div>
              <div class="right flex_flex_start">
                <p class="num"></p>
                <p class="useful">{{value.comment.likes}}喜欢</p>
              </div>
            </div>
            <div class="cont-comments">
              {{value.comment.usercomment}}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getMovieDetail, getMyWantWatch, getMyHasWatched, addWantWatch, addHasWatched, evaluate } from '@/api/movie.js'
import { createComment } from '@/api/comment.js'
export default {
  name: 'MovieDetail',
  components: {},
  data () {
    return {
      dangerouslyUseHTMLString: true,
      score: null,
      movie: {
        movie_name: ''
      },
      comments: [],
      posterUrl: this.picbed + '/poster/',
      hasMarkedWant: false,
      hasMarkedWatched: false,
      isLogin: false,
      evaluate_score: null,
      commentValue: '',
      pathId: this.$route.params.id,
      avatorUrl: this.picbed + '/avator/'
    }
  },
  computed: {
  },
  methods: {
    openComment () {
      this.$prompt('请输入评论内容', '评论' + this.movie.movie_name, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.commentValue = value
          this.pushComment()
        })
        .catch(err => {
          console.log(err)
        })
    },
    pushComment () {
      if (this.commentValue) {
        createComment(this.movie.id, this.commentValue)
          .then(res => {
            if (res.data.state === 200) {
              this.$message({
                type: 'success',
                message: '提交评论成功'
              })
              const pathId = this.$route.params.id
              this.initMovieDetail(pathId, 1)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
      this.commentValue = ''
    },
    evaluateMovie () {
      const { id } = this.movie
      this.$confirm('确认提交评价为' + this.evaluate_score + '星?')
        .then(_ => {
          evaluate(id, this.evaluate_score)
        })
    },
    initMovieDetail (pathId, pageNum) {
      getMovieDetail(pathId, pageNum)
        .then(res => {
          if (res.data.state === 200) {
            const { data } = res.data
            this.score = data.score
            this.movie = data.movie
            this.comments = data.userCommentList
            console.log(this.comments)
          }
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'error'
          })
        })
    },
    markWatch (type) {
      const { id } = this.movie
      switch (type) {
        case 'want':
          addWantWatch(id)
            .then(res => {
              if (res.data.state === 200) {
                this.$message({
                  message: '加入想看列表成功!',
                  type: 'success'
                })
                this.hasMarkedWant = true
              }
              // else {
              //   this.$message({
              //     message: res.data.message,
              //     type: 'error'
              //   })
              // }
            })
          break
        case 'has':
          addHasWatched(id)
            .then(res => {
              if (res.data.state === 200) {
                this.$message({
                  message: '加入已看列表成功!',
                  type: 'success'
                })
                this.hasMarkedWatched = true
              }
              // else {
              //   this.$message({
              //     message: res.data.message,
              //     type: 'error'
              //   })
              // }
            })
          break
      }
    }
  },
  mounted () {
    const pathId = this.$route.params.id
    this.isLogin = this.$store.state.isLogin
    this.initMovieDetail(pathId, 1)
    getMyHasWatched()
      .then(res => {
        if (res.data.state === 200 && res.data.data.includes(pathId)) {
          this.hasMarkedWatched = true
        }
      })
    getMyWantWatch()
      .then(res => {
        if (res.data.state === 200 && res.data.data.includes(pathId)) {
          this.hasMarkedWant = true
        }
      })
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        const pathId = val.params.id
        this.isLogin = this.$store.state.isLogin
        this.initMovieDetail(pathId, 1)
        getMyHasWatched()
          .then(res => {
            if (res.data.state === 200 && res.data.data.includes(pathId)) {
              this.hasMarkedWatched = true
            }
          })
        getMyWantWatch()
          .then(res => {
            if (res.data.state === 200 && res.data.data.includes(pathId)) {
              this.hasMarkedWant = true
            }
          })
      },
      // 深度观察监听
      deep: true
    }
  }
}

</script>

<style>
  *{box-sizing: border-box;}
  .md-content{display: flex;width: 100%; margin: 0 auto;}
  .detail{max-width: 300px;width: 40%;padding-left: 20px;line-height: 150%;white-space: pre-wrap;}
  .pic{text-align: center;}
  .pic span{color:#999;}
  .pingfen{width:30%;border-left: 1px solid #ccc;padding-left: 20px; display: flex; flex-direction: column;}
  .fen{font-size: 36px;}
  .progress{display: inline-block;margin-left:10px; margin-right:10px;}
  .progress span{display: inline-block;width: 20px;background: #f7ba2a;height: 10px;}
  .start {display: flex;padding-bottom: 20px}
  .start .num {color: #387aac}
  .start .start-num { padding-left: 15px;}
  .comments{width: 100%;margin: 0 auto}
  .comments .title {color: #007722}
  .comments .title:hover {cursor: pointer}
  .comments .bar {display: flex;align-items: center;justify-content: space-between;padding: 12px 0}
  .comment_btn {font-size: 14px; color: #ca6445;background: #fae9da;line-height: 13px;padding: 6px 12px;}
  .tab-hd {display: flex;padding-bottom: 15px; font-size: 14px;}
  .hot-bar {padding-bottom: 10px;}
  .left,.right {display: flex;align-items: center;justify-content: space-between;}
  .user,.all {color: #37a}
  .user:hover,.all:hover {color: #FFFFFF;text-decoration: none;background: #37a; cursor: pointer}
  .look{color: #666666;padding: 0 6px}
  .time {color: #999999;}
  .num {color: #666666;padding-right: 4px}
  .useful {color: #37a}
  .useful:hover {color: #FFFFFF;text-decoration: none;background: #37a; cursor: pointer}
  .hot-comments ul li { font-size: 14px; padding: 14px 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
  .cont-comments {font-size: 14px;color: #666666;}
  .md-title {
    margin-top: 40px;
    margin-bottom: 10px;
  }
  .com-user-img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
  }
</style>
